<template>
  <div>
    
    <p>{{total1}}</p>
    <p>{{(total2())}}</p>
    <button @click="add">再出版一本</button>
  </div>
</template>

<script setup>
import {reactive,computed} from 'vue'

const author = reactive({
  name:'John',
  books:['vue','react']
})
const total1 = computed(()=>{
  return author.books.length>0?`出版了${author.books.length}本书`:`未出版书籍`
})

const total2 = ()=>{
   return author.books.length>0?`出版了${author.books.length}本书`:`未出版书籍`
}
const add = ()=>{
  author.books.push('node')
}
</script>